<template>
  <div class="container">
    <el-card class="body">
      <div class="btn">
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
        >
          新增试题
        </el-button>
      </div>
     <!-- 表单 -->
      <el-form :model="form" label-width="80px" size="small">
        <el-row >
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="form.subjectID"
                placeholder="请选择"
                @change="changeName(form.subjectID)"
                style="width:100%"
              >
                <el-option
                  v-for="item in subjectNameList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="form.catalogID" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in directoryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="form.tags" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in tagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="form.questionType" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="form.direction" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="form.creatorID" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="(item, index) in userArr"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks" style="width:100%"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName" style="width:100%"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="城市">
              
                  <el-select
                    v-model="form.province"
                    placeholder="请选择"
                    @change="changeProvince(form.province)"
                   style="width:48%;margin-right:2%"
                  >
                    <el-option
                      v-for="(item, index) in provincesList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select> 
                  <el-select v-model="form.city" placeholder="请选择" style="width:50%">
                    <el-option
                      v-for="(item, index) in cityList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
            
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <div class="btn1">
              <el-button size="small" @click="clear()">清除</el-button>
              <el-button type="primary" size="small" @click="filter()">
                搜索
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 警告 -->
      <el-alert
        class="el-icon-info"
        type="info"
        :closable="false"
        style="margin-bottom:10px"
      >
        数据一共{{ total }}条
      </el-alert>
    </el-card>
  </div>
</template>

<script>
import { simple as getsubjectName } from '@/api/hmmm/subjects'
import { simple as getdirectory } from '@/api/hmmm/directorys'
import { simple as gettag } from '@/api/hmmm/tags'
import {
  difficulty,
  questionType,
  direction,
  chkType,
  publishType
} from '@/api/hmmm/constants'
import { simple as userList } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice, choicePublish, remove } from '@/api/hmmm/questions'
export default {
  name: 'Questions',
  data() {
    return {
      form: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      },
      obj: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      subjectNameList: [],
      directoryList: [],
      tagList: [],
      difficulty,
      questionType,
      direction,
      chkType,
      publishType,
      userOptions: [],
      userArr: [],
      provincesList: [],
      cityList: [],
      tableData: [],
      total: null,
      flag: false,
      activeName: '3',
      newTableData: [],
      dialog1: false,
      radio: '1',
      textarea: '',
      data: {},
      questionInfo: {}
    }
  },
  created() {
    this.getsubjectNameList()
    this.provincesList = provinces()
    this.getList()
  },
  methods: {
    // 学科
    async getsubjectNameList() {
      const { data } = await getsubjectName()
      this.subjectNameList = data
    },
    // 二级目录
    async changeName(subjectID) {
      const { data: subjectData } = await getdirectory({ subjectID })
      this.directoryList = subjectData

      const { data: tagData } = await gettag({ subjectID })
      this.tagList = tagData
    },
    // 录入人
    async getUserOptions() {
      const { data: userArr } = await userList()
      this.userOptions = userArr
    },
    // 城市
    changeProvince(province) {
      this.cityList = citys(province)
    },
    async getList() {
      const {
        data: { counts, items }
      } = await choice(this.form)
      this.total = counts
      this.tableData = items
      this.newTableData = this.tableData
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  margin: 10px 8px 0 8px;
  padding: 0 10px;
  .btn {
    text-align: right;
    margin-bottom: 15px;
  }
  .btn1 {
    text-align: right;
  }
}
</style>
